@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap");

:root {
  --primary-color: #f54538;
  --black: #070707;
  --gradient: radial-gradient(#525252, #131313);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  color: white;
  font-family: "Montserrat", sans-serif;
}

h1 {
  font-size: 2.5rem;
  font-family: "Lobster", cursive;
  font-weight: lighter;
}

h2 {
  font-size: 8rem;
  font-family: "Lobster", cursive;
  font-weight: lighter;
}

h3 {
  font-size: 3.5rem;
}

h4 {
  font-size: 3rem;
}

p {
  font-size: 2.5rem;
}

li {
  font-size: 2rem;
}

a {
  color: white;
  text-decoration: none;
}

@import "home";
@import "features";
@import "soon";
@import "footer";

@media screen and (max-width: 1200px) {
  html {
    font-size: 50%;
  }

  nav {
    #logo {
      flex: 1;
    }
    ul {
      margin-left: 5rem;
    }
  }

  .showcase {
    grid-template-columns: 10% 1fr 10%;

    img {
      width: 100%;
      object-fit: contain;
    }

    img,
    h2,
    .info {
      grid-column: 2/3;
      text-align: center;
    }
  }

  .features {
    align-items: center;

    h2 {
      margin-top: 5rem;
    }

    .cards {
      flex-direction: column;
      width: 60%;

      .card {
        margin: 5rem 0rem;
      }
    }
  }

  .soon {
    overflow: hidden;

    img {
      width: 60%;
    }

    h2 {
      font-size: 5rem;
    }
  }

  .footer {
    h1 {
      flex: 1;
    }
  }
}

@media screen and (max-width: 640px) {
  .features {
    .cards {
      width: 100%;
    }
  }
}
